<script>
// @ 符号代表的是 src 路径
import zfb from '@/assets/zfb.png' 
import { Fold,Expand } from '@element-plus/icons-vue'
import AsideMenuCom from '@/components/AsideMenuCom.vue'

// 用来处理全局状态的
/*
  1. 导入 mapState
  2. 在计算属性中使用 ...mapState(['count'])
  3. 在组件模板中使用数据 {{ count }}
*/ 
import { mapState, mapMutations, mapActions } from 'vuex'

// 导入面包屑组件
import BreadcrumbCom from '@/components/BreadcrumbCom.vue'

export default {
  name: 'home',
  data() {
    return {
      zfb,
      // 定义左侧是否收起来
      collapse: false
    }
  },
  components: {
    Fold,
    Expand,
    AsideMenuCom,
    BreadcrumbCom
  },
  computed: {
    
    // 通过辅助函数的方式获取全局状态
    ...mapState(['count','userInfo']),
    headerLeftIcon() {
      return this.collapse ? 'Expand' : 'Fold'
    },
    asideWidth() {
      return this.collapse ? '64px' : '200px'
    }
  },
  methods: {
    // 通过辅助函数的方式使用 actions 中的方法
    ...mapActions(['addNumAction']),
    // 通过辅助函数的方式使用 mutations 中的方法
    ...mapMutations(['add','addNum','changeUserInfo']),
    loginClick() {
      // console.log(this.$router);
      // 通过编程式导航跳转到登录页面
      // this.$router.push('/login')
      this.$router.push({
        name: 'login'
      })
    },
    addClick() {
      // this.$store.commit('add')
      // this.$store.commit('addNum', 5)
      // this.$store.dispatch('addNumAction', 10)

      // this.add()
      // this.addNum(10)

      this.addNumAction(5)

    },
    logoutClick() {
      // 退出登录的点击事件
      this.changeUserInfo({})

      this.$router.push('/login')
    }
  },
}

</script>

<template>
  
    <div class="common-layout">
    <el-container>
      <!-- 左边侧边栏 -->
      <el-aside :width="asideWidth">
        <div class="logo-box">
          <el-image style="width: 32px; height: 32px" :src="zfb" />
          <h2 v-show="!collapse" class="manage-title"> 快乐购后台管理系统 </h2>
        </div>

        <!-- 侧边栏 menu -->
        <AsideMenuCom :collapse="collapse" />

      </el-aside>
      
      <!-- 右边内容 -->
      <el-container>
        
        <!-- 头部 -->
        <el-header>
          <el-icon @click="collapse = !collapse" size="30">
            <component :is="headerLeftIcon"></component>
          </el-icon>
          <p>
            {{ count }}
            <button @click="addClick">+</button>

            <span v-if="userInfo.adminname"> &#X3000; 欢迎 {{ userInfo.adminname }} &#X3000; </span>

            <el-button v-if="!userInfo.adminname" @click="loginClick">登录</el-button>
            <el-button v-else @click="logoutClick">退出登录</el-button>

          </p>
        </el-header>
        
        <!-- 面包屑 -->
        <BreadcrumbCom />

        <!-- 主体内容 -->
        <el-main>
          <!-- 用来显示二级路由的 -->
          <router-view></router-view>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>
<!-- lang="scss" 定义样式使用 sass -->
<style scoped lang="scss">
.el-container {
  /* background-color: rgb(244, 244, 226); */
  .el-aside {
    background-color: rgb(235, 209, 209);


    .logo-box {
      height: 60px;
      display: flex;
      align-items: center;

      .el-image {
        margin: 0 8px;
        padding-left: 7px;
      }
      .manage-title {
        font-size: 16px;
      }
    }

  }

}
.el-header {
  background-color: rgb(215, 238, 232);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>